<template>
  <div style="width: 100%;height: 100px;display: flex;align-items: center;justify-content: center;">
    <AnSpace>
      <AnPopover>
        <AnButton>bottom</AnButton>
        <template #content>
          <div style="width: 100px;">
            <div>内容</div>
            <div>内容</div>
          </div>
        </template>
      </AnPopover>

      <AnPopover placement="top">
        <AnButton>top</AnButton>
        <template #content>
          <div style="width: 100px;">
            <div>内容</div>
            <div>内容</div>
          </div>
        </template>
      </AnPopover>

      <AnPopover placement="left">
        <AnButton>left</AnButton>
        <template #content>
          <div style="width: 100px;">
            <div>内容</div>
            <div>内容</div>
          </div>
        </template>
      </AnPopover>

      <AnPopover placement="right" @opened="opened" @closed="closed">
        <AnButton>right</AnButton>
        <template #content>
          <div style="width: 600px;">
            {{ content }}
          </div>
        </template>
      </AnPopover>
    </AnSpace>
  </div>

  <div style="width: 100%;height: 100px;display: flex;align-items: center;justify-content: center;">
    <AnSpace>
      <AnPopover trigger="hover">
        <AnButton>bottom</AnButton>
        <template #content>
          <div style="width: 100px;">
            <div>内容</div>
            <div>内容</div>
          </div>
        </template>
      </AnPopover>

      <AnPopover trigger="hover" placement="top">
        <AnButton>top</AnButton>
        <template #content>
          <div style="width: 100px;">
            <div>内容</div>
            <div>内容</div>
          </div>
        </template>
      </AnPopover>

      <AnPopover trigger="hover" placement="left">
        <AnButton>left</AnButton>
        <template #content>
          <div style="width: 100px;">
            <div>内容</div>
            <div>内容</div>
          </div>
        </template>
      </AnPopover>

      <AnPopover trigger="hover" placement="right" @opened="opened" @closed="closed">
        <AnButton>right</AnButton>
        <template #content>
          <div style="width: 600px;">
            {{ content }}
          </div>
        </template>
      </AnPopover>
    </AnSpace>
  </div>
</template>

<script setup lang="ts">
import AnSpace from '@packages/components/space'
import AnButton from '@packages/components/button'
import AnPopover from '@packages/components/popover'
import { onMounted, ref } from 'vue';
const content = ref('content')
const opened = () => {
  console.log('opened');
  content.value = 'Upon accessing and utilizing our Website and Services, you consent to being governed by and acknowledging these Terms of Service, as well as any supplementary terms and conditions specified on the website. Should you disagree with these terms, you are prohibited from using or accessing this site, and kindly refrain from employing our application and website. The content featured on this website is safeguarded by copyright and trademark laws.'
}
const closed = () => {

}
onMounted(() => {

});
</script>
